<template>
  <el-dialog :title="title" :visible="showDialog" @close="close">
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item label="部门名称" :label-width="formLabelWidth" prop="name">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="部门编码" :label-width="formLabelWidth" prop="code">
        <el-input v-model="form.code" autocomplete="off" />
      </el-form-item>
      <el-form-item
        label="部门负责人"
        :label-width="formLabelWidth"
        prop="manager"
      >
        <el-select
          v-model="form.manager"
          placeholder="请选择负责人"
          @focus="loadSimple"
          @blur="$refs.form.validateField('manager')"
          @change="$refs.form.validateField('manager')"
        >
          <el-option
            v-for="item in empList"
            :key="item.id"
            :label="item.username"
            :value="item.username"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="部门介绍"
        :label-width="formLabelWidth"
        prop="introduce"
      >
        <el-input
          v-model="form.introduce"
          type="textarea"
          :rows="2"
          placeholder="请输入部门介绍"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('update:showDialog', false)">{{ $t('btnText.cancel') }}</el-button>
      <el-button type="primary" @click="save">{{ $t('btnText.ok') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { deptListAPI, addDeptAPI, editDeptAPI } from '@/api/department'
import { simpleListAPI } from '@/api/employees'
export default {
  props: {
    // 控制显示和隐藏
    showDialog: {
      type: Boolean,
      default: false
    },
    pid: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    // 参数1：规则对象，没什么用
    // 参数2：输入的内容
    // 参数3：调用这个函数什么都不传就代表校验通过，如果调用这个传入了new Error就代表校验失败
    const checkName = async(rule, value, callback) => {
      if (this.title === '查看部门') {
        // 修改 -- 单独做个逻辑，它允许跟原本的名字相同
        if (this.oldForm.name === value) {
          return callback()
        }
      }
      // 1. 获取所有部门
      const res = await deptListAPI()
      // 2. 筛选出同级部门
      // const list = res.data.depts.filter(v => v.pid === this.pid)
      // 3. 判断输入的内容是否跟同级部门名字一致
      // 其实要找有没有重复的，其实就是满足两个条件：1. pid一致  2.name一致
      // 所以是一个并且的关系
      if (
        res.data.depts.find(v => v.name === value.trim() && v.pid === this.pid)
      ) {
        callback(new Error('部门名不能重复'))
      } else {
        callback()
      }
    }

    const checkCode = async(rule, value, callback) => {
      if (this.title === '查看部门') {
        // 修改 -- 单独做个逻辑，它允许跟原本的编码相同
        if (this.oldForm.code === value) {
          return callback()
        }
      }

      // 1. 获取所有部门
      const res = await deptListAPI()
      // 2. 找有没有code相同的，有代表校验不通过，没有代表通过
      if (res.data.depts.find(v => v.code === value.trim())) {
        callback(new Error('部门编码不能重复'))
      } else {
        callback()
      }
    }

    return {
      title: '新增部门',
      form: {
        name: '',
        code: '',
        manager: '',
        introduce: ''
      },
      oldForm: {
        name: '',
        code: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { validator: checkName, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { validator: checkCode, trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '请输入部门名称', trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '请输入部门名称', trigger: 'blur' }
        ]
      },
      // 控制文本宽度
      formLabelWidth: '120px',
      empList: []
    }
  },
  methods: {
    async loadSimple() {
      // 获取简单员工列表
      const res = await simpleListAPI()
      this.empList = res.data
    },

    // 确定的点击事件
    save() {
      // 自己做校验
      this.$refs.form.validate(async v => {
        if (v) {
          // 判断一下是新增还是修改
          if (this.title === '新增部门') {
            // 1. 发请求做新增
            await addDeptAPI({
              ...this.form,
              pid: this.pid
            })
            this.$message.success('新增部门成功')
          } else {
            // 修改
            await editDeptAPI(this.form)
            this.$message.success('修改部门成功')
          }
          // 2. 关闭对话框
          this.$emit('update:showDialog', false)
          // 3. 重新渲染界面
          this.$emit('refresh')
        } else {
          console.log('error')
        }
      })
    },

    close() {
      // // 1. 清空表单
      this.form = {
        name: '',
        code: '',
        manager: '',
        introduce: ''
      }
      // 2. 清除所有的校验结果
      this.$refs.form.clearValidate()
      // 3. 通知父关闭
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

<style></style>
